<template>
	<div class="liveManager w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>{{updateTitle}}</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="newLive" v-if="liveManager.zbgl_add">创建直播课程</a>
				<a class="listTwo" @click="importDaoChu" v-if="liveManager.zbgl_export">导出数据</a>
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_2"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入课程、讲师……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="courseName" label="直播课程名称"></el-table-column>
				<el-table-column prop="lecturerName" label="讲师" width="70"></el-table-column>
				<el-table-column label="课件组" width="80">
					<template slot-scope="scope">
						<el-button @click="liveCourseware(scope.row)">添加管理</el-button>
					</template>
				</el-table-column>
				<el-table-column label="直播目录" width="80">
					<template slot-scope="scope">
						<el-button @click="liveColumn(scope.row)">添加管理</el-button>
					</template>
				</el-table-column>
				<el-table-column label="课程数据" width="80">
					<template slot-scope="scope">
						<el-button @click="liveData(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="140"></el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="140"></el-table-column>
				<el-table-column label="操作" width="130">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" v-if="liveManager.zbgl_edit">编辑</el-button>
						<el-button @click="handleComment(scope.row)" v-if="liveManager.zbgl_comment" class="blue">评论</el-button>
						<el-button @click="handleDelete(scope.row)" v-if="liveManager.zbgl_del" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleDeleteAll()" class="allDelete" v-if="liveManager.zbgl_delAll">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				liveManager:'',
				search: "",
				updateTitle:'直播管理',
				searchSelect: [],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                },
				tableData: [],
				pathKey:'',
				lecturerid:'',
				pagesize: 15,
				currentpage: 1,
				total: 1,
				multipleSelection: [],
				deleteType:'delete'
			}
		},
		methods: {
			getParams() {
				this.pathKey = this.$route.params.pathKey;
				if(this.pathKey=='teacher'){
					this.lecturerid = this.$route.params.lecturerid;
					this.updateTitle = this.$route.params.updateTitle;
				}
				console.log('liveManager:',this.$route.params);
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getLiveBroadcastCoursePage?"+'page='+this.currentpage+'&num='+ this.pagesize+'&name='+this.search+'&columnid='+this.searchSelect +'&rootcompanyid='+1+'&lecturerid='+this.lecturerid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			newLive(){
				this.$router.push({
					path: '/newLive'
				})
			},
			handleEdit(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/getLiveBroadcastCourseById?" + 'id=' + row.id,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'newLive',
								params: {
									type: 'edit'
								}
							})
							this.$root.liveMsg = res.data.data;
						}
					}
				});
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			handleDeleteAll() {
				this.$rootFunction().rootDeleteAll();
			},
			deleteSubmit() {
				if(this.deleteType == 'delete'){
					var s={ids:this.transitionRow.id};
					this.$ajax({
						url: this.$root.jifuUrl + "/deleteLiveBroadcastCourse",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else{
					var s={ids:this.multipleSelection.join(",")};
					this.$ajax({
						url: this.$root.jifuUrl + "/deleteLiveBroadcastCourse",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			handleComment(row) {
				this.$router.push({
					name: 'addcomment',
					params: {
						courseId: row.id,
						courseName:row.courseName
					}
				})
			},
			liveCourseware(row){
				this.$router.push({
					name: 'courseware',
					params: {
						liveId:row.id,
						updateTitle:row.courseName,
						pathKey:'liveManager'
					}
				})
			},
			liveColumn(row){
				this.$router.push({
					name: 'liveColumn',
					params: {
						liveId:row.id,
						updateTitle:row.courseName,
						pathKey:'liveManager'
					}
				})
			},
			liveData(row){
				this.$router.push({
					name: 'liveData',
					params: {
						liveId:row.id,
						updateTitle:row.courseName,
						pathKey:'liveManager'
					}
				})
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
			importDaoChu(){},
			GoBack(){
				this.$router.push({
					name:this.pathKey
				});
			},
			getColumnList(){
				let columnType = [5];
				this.$rootFunction().columnList({columnType});
			},
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getParams();
			if(this.updateTitle==null){
				this.$store.commit('GET_LiveManager');
				var s =this.$store.state.liveManager;
				this.lecturerid=s.lecturerid;
				this.updateTitle=s.updateTitle;
				this.pathKey=s.pathKey;
			};
			this.getTableList();
			this.getColumnList();
			window.addEventListener("beforeunload",()=>{
				s={
					lecturerid:this.lecturerid,
					updateTitle:this.updateTitle,
					pathKey:this.pathKey
				}
				this.$store.commit('SET_LiveManager', s);
			});
			this.liveManager = this.$root.huasan.liveManager;
		},
		watch:{
			$route: 'getParams'
    	}
	}
</script>